<template>
  <div>
    <input type="text" v-model.trim.lazy="xing" />
    <input type="text" v-model.trim.lazy="ming" />
    <input type="text" v-model.trim.lazy="fullName" />
  </div>
</template>

<script>
export default {
  data: () => ({
    xing: "任",
    ming: "忆莲",
  }),
  computed: {
    //--------------------------------函数形式计算属性  只能调用 不能修改-------------------------------------
    //计算属性(){
    //return '计算的结果'
    // }
    // fullname() {
    //   return this.xing + this.ming;
    // },

    //----------------------如果需要修改计算属性的值  需要写成对象格式---------------------------
    //调用计算属性的时候,get就会执行
    fullName: {
      get() {
        // 当获取计算属性值的时候，就会调用 get 方法
        return this.xing + this.ming;
      },
      set(value) {
        // 当修改计算属性值的时候，就会执行 set 方法
        // value 就是修改后的计算属性值
        let arr = value.split(" ");
        this.xing = arr[0];
        this.ming = arr[1];
      },
    },
  },
};
</script>

<style >
h2 {
  color: skyblue;
}
</style>